import React from 'react';
import { inject, observer } from 'mobx-react';
import { Table, Space, Button, Row, Col, Tree, Input } from 'antd';
import EventBus from '@/utils/eventBus';
import {
  CarryOutOutlined,
  FormOutlined,
  PlayCircleOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
  DeleteOutlined,
  YoutubeOutlined,
  FolderOutlined,
  FileOutlined,
} from '@ant-design/icons';
import './index.less';

const ipcRenderer = window.require('electron').ipcRenderer;

@inject('store')
@observer
class Generate extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      active: 0,
      selector: '',
      code: '',
      title: '',
      tests: [],
    };
  }

  deleteEvent(row, key, index) {
    this.props.store.project.deleteEvent(key, index);
  }
  deleteTest(index) {
    this.props.store.project.deleteTest(index);
  }
  /**
   * 修改页面名称
   * @param {*} e
   */
  changePageName(e) {
    const value = e.target.value;
    this.props.store.project.changePageName(value);
  }
  /**
   * 修改页面路径
   * @param {*} e
   */
  changePagePath(e) {
    const value = e.target.value;
    this.props.store.project.changePagePath(value);
  }

  /**
   * 修改测试用例名称
   * @param {*} e
   */
  changeTestName(e, index) {
    const value = e.target.value;
    this.props.store.project.changeTestName(value, index);
  }
  /**
   * 选中某个元素
   * @param {*} idStr
   */
  selectElement = (idStr, index) => {
    this.props.store.project.selectElement(idStr, index);
  };
  /**
   * 删除页面
   */
  deletePage() {
    this.props.store.project.deletePage();
  }
  /**
   * 展示详细数据
   * @param {*} data
   */
  showDetail(data) {
    EventBus.$emit('edit-element', data);
  }
  render() {
    const { active } = this.state;
    const {
      projects,
      projectActive,
      pageActive,
      testActive,
      eventActive,
    } = this.props.store.project;
    if (!projects[projectActive] || !projects[projectActive].pages[0]) return null;
    const { pageName, pagePath, tests = [] } = projects[projectActive].pages[pageActive];
    return (
      <div className="content">
        <div className="page">
          <Row>
            <Col span="4">页面名称：</Col>
            <Col span="12">
              <Input
                value={pageName}
                onChange={(e) => this.changePageName(e)}
                placeholder="请输入页面名称"
              ></Input>
            </Col>
            <Col offset="2">
              <Button type="link" onClick={() => this.deletePage()}>
                删除页面
              </Button>
            </Col>
          </Row>
          <Row>
            <Col span="4">页面路径：</Col>
            <Col span="20">
              <Input
                value={pagePath}
                onChange={(e) => this.changePagePath(e)}
                placeholder="请输入页面名称"
              ></Input>
            </Col>
          </Row>
          {tests &&
            tests.map((test, key) => (
              <div
                key={key}
                id={`page_${pageActive}-test_${key}`}
                className={testActive == key ? 'test-container active' : 'test-container'}
                onClick={() => this.selectElement(`page_${pageActive}-test_${key}`)}
              >
                <Row style={{ borderBottom: '1px solid #d8d8d8' }}>
                  <Col span="12">
                    <Input
                      value={test.title}
                      onChange={(e) => this.changeTestName(e, key)}
                      placeholder="请输入用例名称"
                    ></Input>
                  </Col>
                  <Col offset="8">
                    <Button type="link" onClick={() => this.deleteTest(key)}>
                      删除
                    </Button>
                  </Col>
                </Row>
                <Row className="test-content">
                  {test.events &&
                    test.events.map((item, index) => {
                      let type = {
                        text: '文本',
                        id: 'id',
                        class: '类',
                        tagName: '标签类型',
                      }[item.elementType];
                      let event = {
                        tap: '点击',
                        longpress: '长按',
                        scrollTo: '滚动',
                        validate: '验证',
                        waitFor: '等待',
                        input: '输入',
                      }[item.eventType];
                      return (
                        <div
                          onClick={() =>
                            this.selectElement(`page_${pageActive}-test_${key}`, index)
                          }
                          key={index}
                        >
                          <Row
                            className={
                              item.fail
                                ? 'test-line error'
                                : testActive == key && eventActive == index
                                ? 'test-line activity'
                                : 'test-line'
                            }
                            key={index}
                          >
                            <Col span={4}>
                              <Space size="middle">{event}</Space>
                            </Col>
                            <Col span={8}>
                              {type}：{item.identify}
                            </Col>
                            <Col span={4}>{item.params}</Col>
                            <Col span={8}>
                              <Button type="link" onClick={() => this.showDetail(item)}>
                                编辑
                              </Button>
                              <Button
                                type="link"
                                onClick={() => this.deleteEvent(item, key, index)}
                              >
                                删除
                              </Button>
                            </Col>
                          </Row>
                        </div>
                      );
                    })}
                </Row>
              </div>
            ))}
        </div>
      </div>
    );
  }
}

export default Generate;
